<template>
    <div class="choose-class-box flex-center-col-start">

        <el-form class="choose-class-form" label-width="100" label-position="left">
            <el-form-item required label="Cookie">
                <el-input  v-model="obj.form.cookie">

                </el-input>
            </el-form-item>
            <el-form-item required label="课程id" l>
                <el-input label="课程id" v-model="obj.form.classId">

                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" @click="beforeSubmit">暂停</el-button>
                <el-button @click="afterSubmit">后端抢</el-button>
                <el-button type="warning" @click="()=>{
                    obj.result='- 准备完毕'
                    obj.count=0
                }">清空</el-button>
            </el-form-item>

            <el-form-item label="响应界面">
                <div class="choose-class-resp" v-html="obj.result">

                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {reactive} from "@vue/reactivity";
    import service from "@/assets/js/service";

    export default {
        name: "ChooseClass",
        setup(){

            let obj=reactive({
                count:0,
                play:false,
                result:" — 准备完毕",
                form:{
                    cookie:"",
                    classId:89168,

                }
            })

            let check=()=>{

                let date=service.checkChooseClass(obj.form.cookie)
                date.then(resp=>{
                    if(resp.code===200){

                        addMessage("<div style='color:#6E35AE;height: 30px'>— 开始选课!</div>")
                        chooseClass()
                        return true

                    }else if(resp.code === 500 ){
                        addMessage("<div style='color: deeppink;height: 30px'>— "+resp.msg+"</div>")
                        // 选课还没开始

                        // 继续抢课
                        if(obj.play===true){
                            setTimeout(()=>{
                                check()
                            },500)
                        }
                        return false

                    }else{

                        // cookie出错
                        addMessage("<div style='color: red;height: 30px'>— "+resp.msg+"</div>")
                    }
                    obj.count=0
                })
            }
            let chooseClass=()=>{
                let data=service.afterChooseClass(obj.form.cookie,obj.form.classId)
                data.then(resp=>{
                    if(resp.code === 200){
                        addMessage("<div style='color:#6E35AE;height: 30px'>— 选课成功!</div>")
                        obj.count=0
                        obj.play=false
                    }else{
                        addMessage("<div style='color: deeppink;height: 30px'>— "+resp.msg+"</div>")
                        if(obj.play===true){
                            setTimeout(()=>{
                                chooseClass()
                            },500)
                        }
                    }
                })
            }

            let afterChooseClass=()=>{
                check()
            }
            let addMessage=(message)=>{
                obj.result=message+obj.result
            }
            let beforeSubmit=()=>{
                obj.play=false
            }

            let afterSubmit=()=>{
                if(obj.count === 0){
                    addMessage("— 开始抢课<br>")
                    obj.count++
                    // 选课程序开始
                    obj.play=true
                    afterChooseClass()
                }else if(obj.count === 1){
                    addMessage("抢课已经开始,请勿重复点击")
                    obj.count++
                }else{

                }
            }

            return{
                obj,
                beforeSubmit,
                afterSubmit
            }
        }
    }
</script>

<style scoped lang="less">
    .choose-class-box{
        width: 100%;
        height: 100%;
        .choose-class-form{
            width: 40%;
            .choose-class-resp{
                border: 2px solid #42b983;
                width: 500px;
                height: 600px;
                overflow-y: auto;
                text-align: left;
                padding-left: 20px;
                border-radius: 5px;

            }
        }
    }
</style>